<template>
    <div class="home-wrapper">
        <div class="cards">
            <div class="item">
              <Card icon="el-icon-user-solid" :number="30" subTitlte="关注人数(个)"></Card> 
            </div>
            <div class="item">
              <Card icon="el-icon-user-solid" :number="120" subTitlte="订单总数(笔)"></Card>
            </div> 
            <div class="item">
              <Card icon="el-icon-user-solid" :number="4183.80" subTitlte="今日订单总金额(元)"></Card>
            </div> 
            <div class="item">
              <Card icon="el-icon-user-solid" :number="100" subTitlte="本月销量(笔)"></Card>
            </div> 
        </div>
        <div class="second-box">
            <div class="state-cards">
                <div class="item">
                    <StateCard :number="64" state="出售中"></StateCard>
                </div>
                <div class="item">
                    <StateCard :number="64" state="出售中"></StateCard>
                </div>
                <div class="item">
                    <StateCard :number="64" state="出售中"></StateCard>
                </div>
                <div class="item">
                    <StateCard :number="64" state="出售中"></StateCard>
                </div>
            </div>
            <div class="charts" ref="echarts">
               
            </div>
        </div>
    </div>
</template>

<script>
import  Card from './components/Card.vue'
import StateCard from './components/StateCard'
import * as echarts from 'echarts';
    export default {
        name:"Home",
        components: {
            Card,
            StateCard,
        },
        methods: {
            /**
             * 初始化报告
             */
            initReport() {
                const chart=echarts.init(this.$refs.echarts);
                chart.setOption({
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                        }
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接服务', '搜索引擎']
                    },
                    toolbox: {
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value'
                        }
                    ],
                    series: [
                        {
                        name: '邮件营销',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                        name: '联盟广告',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                        name: '视频广告',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                        name: '直接服务',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                        name: '搜索引擎',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                });
            }
        },
        mounted(){
            this.initReport();
        },
    }
</script>

<style lang="scss" scoped>
.home-wrapper{
    padding: 20px;
    .second-box{
        display: flex;
        // flex-direction: column;
        &>div{
            flex: 1;
        }
        .state-cards{
            display: flex;
            background: white; 
            .item{
                flex: 1;
                padding:0 10px;
            }
        }
        .charts{
            background: white;
            height: 310px;
            margin-left: 10px;
        }
    }

    .cards{
        display: flex;
        .item{
            flex: 1;
            padding: 0 10px;
            &:first-child{
                padding-left: 0;
            }
            &:last-child{
                padding-right: 0;
            }
        }
    }
}
</style>